<template>
  <div>
    <el-row :gutter="20" class="content_box">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        v-for="(item, index) in infoObject"
        :key="index"
      >
        <div class="one_item">
          <img class="one_item_image" :src="item.icon" />
          <div class="one_item_title">{{ item.title }}</div>
          <div class="one_item_content">
            <p v-html="item.des"></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      infoObject: [
        {
          icon:
            "../../../static/workbox/Toolbox_UDIDAcquisition_CertificateSigning@2x.png",
          title: "iOS企业证书生成",
          des:
            "使用企业证书可免提交AppStore，即可安装，不限制iOS设备，不限制下载次数，无限制安装。",
        },
        {
          icon:
            "../../../static/workbox/Toolbox_UDIDAcquisition_APPDownload@2x.png",
          title: "APP 下载便捷、高效",
          des:
            "提供App多套下载模板，提高用户下载转化率，自动判断设备类型区分安卓或者苹果，快速无广告急速下载。",
        },
        {
          icon:
            "../../../static/workbox/Toolbox_UDIDAcquisition_APPHosting@2x.png",
          title: "APP 免费、快捷托管",
          des:
            "一键上传App，迅速生成下载链接和二维码，立即上线，让您的App尽快与用户见面，为您提供免费、快捷的应用托管分发服务。",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
.content_box {
  margin-top: 20px;
  margin-bottom: 30px;
}
.one_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin-bottom: 20px;
}
.one_item_image {
  width: 78px;
  height: 96px;
  margin-top: 77px;
}
.one_item_title {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-top: 20px;
}
.one_item_content {
  width: 280px;
  height: 130px;
  font-size: 18px;
  line-height: 30px;
  color: #7e7e7e;
  margin-top: 20px;
  margin-bottom: 80px;
}

.item_btn {
  position: absolute;
  bottom: 20px;
  background-color: #167df1;
  color: white;
  width: 170px;
}
.lastColor {
  background-color: #f2f2f2;
  color: #b4b4b4;
}
</style>